<html>
    <head>
        <link type="text/css" href="css/home.css" rel="stylesheet" />
        <link type="text/css" href="css/menu.css" rel="stylesheet">
        <link type="text/css" href="css/search.css" rel="stylesheet">      
        <script type="text/javascript" src="js/jquery-1.4.1-and-plugins.min.js"></script>
        <script type="text/javascript" src="js/search.js"></script> 
        <script type="text/javascript" src="js/shuffle.js"></script>

    </head>
    <body>
        <div>
        <!-- Header starts -->
        <div id="header">
            <div id="logo" style="z-index:10">
                <img src="images/logo.png">
                <p style="font:Hero;font-size:60;margin:0px;">

                </p>
            </div>

            <div class="search-area">
                <form class="form-wrapper cf" action="" method="post" accept-charset="utf-8" autocomplete="off">
                    <input type="text" placeholder="Search here..." required onkeyup="getStates(thisValue)" autofocus="autofocus" name="query" value="" spellcheck="false">
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
        <!-- Header ends -->

        <div></div>

        <div style="clear:both"></div>
        <!-- Toolbar starts -->
        <div id='cssmenu'>
            <ul>
                <li class='active '><a href='index.html'><span>Home</span></a></li>
                <li class='has-sub '><a href='#'><span>Products</span></a>
                    <ul>
                       <li><a href='#'><span>Product 1</span></a></li>
                       <li><a href='#'><span>Product 2</span></a></li>
                    </ul>
                </li>
                <li><a href='#'><span>About</span></a></li>
                <li><a href='#'><span>Contact</span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li class="blank"><a href=''><span></span></a></li>
                <li><a href='index.html'><span>CART</span></a></li>
                <li><a href='index.html'><span>LOG IN</span></a></li>
                <li><a href='index.html'><span>SIGN UP</span></a></li>
            </ul>
        </div>
        <!-- Toolbar ends -->
        </div>
        <div id="main" style="height:500px">
            <div class="post-content">
                <div class="content">

                    <div class="first-row">
                        <span id="h1">SEARCH RESULT</span>
                        <div class="search-filter">
                            Sort by <div class="sort" id ="price">Lowest price</div>
                           <div class="sort" id ="price">Newest</div>
                           <div class="sort" id ="price">Highest rating</div>
                        </div>
                    </div>
                    <form id="filter">
                    </form>
                    <ul id="products">
                    </ul>
                </div>
            </div>
        </div>
        <div id="footer">
            <div class="col-leftmost">
                <img src="images/logo.png" alt="logo" width="" height="">
            </div>
            <div class="col">
                <h3>Header</h3>
                <ul>
                    <li><a href=""><div class="f-highlight">This is a link</div></a></li>
                    <li><a href=""><div class="f-highlight">This is a link</div></a></li>
                    <li><a href=""><div class="f-highlight">This is a link</div></a></li>
                </ul>
            </div>
            <div class="col">
                <h3>Header</h3>
                <ul>
                    <li><a href=""><div class="f-highlight">This is a link</div></a></li>
                    <li><a href=""><div class="f-highlight">This is a link</div></a></li>
                    <li><a href=""><div class="f-highlight">This is a link</div></a></li>
                    <li><a href=""><div class="f-highlight">This is a link</div></a></li>
                </ul>
            </div>
        </div>
    </body>
</html>